<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>219970529唐若兰</title>

		<style>
			img {
				position: fixed;
				left: 600px;
				top: 400px;
			}

			#mytank {
				position: absolute;
				left: 10px;
				top: 100px
			}
		</style>
	</head>


	<body background="img/grassland.png">
		<img id="mytank" src="img/right.png" alt="">
		<script>
			window.oncontextmenu = function() {//禁用右键
				return false;
			}
			// 获取图片
			var Oimg = document.querySelector('img')//219970529唐若兰
			// 获取图片的属性
			var style = getComputedStyle(Oimg)
			// 记录图片的初始位置
			var L = parseInt(style.left)
			var T = parseInt(style.top)
			var w = document.body.offsetWidth
			var h = document.body.offsetHeight
			// 绑定键盘按下事件
			window.onkeydown = function(e) {
				console.log(e.key);
				// 判断方向键
				switch (e.key) {
					// 按下上方向键
					case 'ArrowUp':
						// 改变图片的src地址，控制转向
						Oimg.src = 'img/up.png'
						// 目标位置 = 初始位置 - 每次移动距离（这里设为10px）
						T = T - 10
						// 改变图片的top距离，控制移动
						Oimg.style.top = T + 'px'
						if (T <= 0) {
							alert("您已经到最上边了！");
						}
						break;

					case 'ArrowDown':
						Oimg.src = 'img/down.png'
						T = T + 10
						Oimg.style.top = T + 'px'
						if (T >= 640) {
							alert("您已经到最下边了！");
						}
						break;

					case 'ArrowLeft':
						Oimg.src = 'img/left.png'
						L = L - 10
						Oimg.style.left = L + 'px'
						if (L <= 0) {
							alert("您已经到最左边了！");
						}
						break;

					case 'ArrowRight':
						Oimg.src = 'img/right.png'
						L = L + 10
						Oimg.style.left = L + 'px'
						if (L >= w) {
							alert("您已经到最右边了！");
						}
						break;
				}
			}
		</script>
	</body>

</html>
